<template>
	<view class="outBox">
		<u-navbar leftText="分享有礼" leftIconColor="#fff" :autoBack="true" bgColor="#242331">
			<view class="left-slot" slot="left">
				 <u-icon name="arrow-left" color="#fff"></u-icon>
				<text>分享有礼</text>
			</view>
		</u-navbar>
    <video :src="videoUrl + '/mp4/1.mp4'" autoplay loop muted></video>
		<view class="content" :style="{
			marginTop:menuHeight + 'px',
				minHeight:` calc(100vh - ${menuHeight}px)`
		}">
			<view class="title">

        <image class="img4" :src="baseImgUrl + '/share/mimg4.png'" mode="heightFix"></image>
        <image class="img3" :src="baseImgUrl + '/share/mimg3.png'" mode="heightFix"></image>
<!--				<image :src="baseImgUrl + '/share/img1.png'" mode="widthFix"></image>-->
			</view>
      <view class="cont">
        <image class="img1" :src="baseImgUrl +'/share/mimg1.png'" mode="widthFix"></image>
        <image class="img2" :src="baseImgUrl +'/share/mimg2.png'" mode="widthFix"></image>
      </view>

      <view class="rules">
        <view class="cont1">
          <view class="tit">
            <text>规则一</text>
            <image :src="baseImgUrl +'/share/mimg6.png'" mode="widthFix"></image>
          </view>
        </view>
      </view>
			<view class="items">
        <view class="title2">
          <text>我的战绩</text>
          <image :src="baseImgUrl +'/share/mimg5.png'" mode="widthFix"></image>
        </view>
				<view class="item">
					<view class="left">
						<image :src="baseImgUrl + '/share/img2.png'" mode="widthFix"></image>
						<text>分享</text>
					</view>
					<view class="value">
						<view class="num1">
							<text>0</text>
						</view>
						<view class="unit">
							<text>人</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image :src="baseImgUrl + '/share/img3.png'" mode="widthFix"></image>
						<text>抽佣</text>
					</view>
					<view class="value">
						<view class="num2">
							<text>0</text>
						</view>
						<view class="unit">
							<text>人</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image :src="baseImgUrl + '/share/img4.png'" mode="widthFix"></image>
						<text>收益</text>
					</view>
					<view class="value">
						<view class="num3">
							<text>0</text>
						</view>
						<view class="unit">
							<text>元</text>
						</view>
					</view>
				</view>

			</view>
			<view class="btn">
				<text>分享赚钱</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				videoUrl: this.$videoUrl,
				baseImgUrl: this.$baseImgUrl,
			}
		},
    onShareAppMessage(res) {
      return {
        title: 'FOMOXYZ',
        path: `/pages/share/index`
      }
    },
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.rules{
  width: 95vw;
  margin: 0 auto;
  border: 4rpx solid;
  min-height: 200rpx;
  border-image: linear-gradient(180deg, rgba(215, 52, 201, 1), rgba(153, 85, 255, 1)) 4 4;
  .tit{
    text-align: center;
    position: relative;
    margin-top: 30rpx;
    text{
      position: absolute;
      left: 52%;
      top: 44%;
      font-weight: bold;
      font-size: 28rpx;
      color: #FFFFFF;
      transform: translate(-50%,-50%);
    }
    image{
      width: 165rpx;
    }
  }
}
.cont{
  text-align: center;
  margin-top: 30rpx;
  .img1{
    width: 492rpx;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .img2{
    width: 100%;
  }
}
.title{
  margin-top: 150rpx;
  position: relative;
  margin-left: 30rpx;
  .img3{
    position: absolute;
    top: 50%;
    left: 50rpx;
    height: 50rpx;
    transform: translateY(-50%);
  }
  .img4{
    height: 68rpx;
  }
}
	.btn{
		background: linear-gradient( 267deg, #CC34B3 0%, #541A66 100%);
		border-radius: 200rpx 200rpx 200rpx 200rpx;
    height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
    margin: 30rpx 80rpx 50rpx;

    text{
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.items{
		padding: 0 80rpx;
    margin-top: 30rpx;
    .title2{
      position: relative;

      text{
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 38rpx;
        transform: translateX(-50%) translateY(-50%);
      }
      image{
        width: 100%;
      }
    }
		.item{
			border-bottom: 2rpx dashed #C432AE;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					margin-right: 20rpx;
				}
				text{
					color: #fff;
					font-size: 28rpx;
				}
			}
			.value{
				display: flex;
				align-items: center;
				.num1{
					color: #2AFED4;
					font-weight:600;
				}
				.num2{
					color: #FF844F;
					font-weight:600;
				}
				.num3{
					color: #FE555D;
					font-weight:600;
				}
				.unit{
					margin-left: 20rpx;
					color: #fff;
				}
			}
		}
	}
	.img1 {
		image {
			width: 100%;
		}
	}

	.content {
		position: relative;
		box-sizing: border-box;
		min-height: calc(100vh);
		background: rgba(0, 0, 0, 0.6);
    padding-bottom: 50rpx;
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.left-slot {
		color: #fff;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}
</style>
